@charset "utf-8";
html,body {
    margin: 0px; height: 100%;
}
body{
    font-size: 14px;
    min-width: 1280px;
    min-height: 750px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("../img/bg.jpg") center center no-repeat #03727a;;
}

button{cursor: pointer}
/*弹性布局*/
.body{ position: relative;      display: -webkit-flex;
    display: flex;  overflow: hidden;

    width: 1280px;
    height: 750px;
    border: 1px solid #04575f;
    border-radius: 5px;
    box-shadow: 0px 0px 11px 0px #023238;
}
/*菜单*/
.menus{ height: 100%; width: 60px; background-color: #303841}
.menus .photo{width: 40px;
    height: 40px;
    border-radius: 20px;
    border: 2px solid #fff; cursor: pointer;
    margin: 8px;}
.menus ul{ margin: 0px; padding: 0px; list-style: none;}
.menus ul li{ width: 50px; height: 55px;    position: relative; width: 57px;
    margin: 0;
    text-align: center;
    font-size: 30px;
    cursor: pointer;
    color: #a5b5c1;padding-top: 10px;
    border-left: 3px solid #303841; margin-top: 20px;
}
.menus ul li .icon{ background-image: url("../img/icon.png");
    background-repeat: no-repeat;width: 40px; height: 40px;margin-left: 8px;position: relative; }
.menus ul li .icon sup{    color: #fff;
    font-size: 12px;
    background: red;
    display: block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 10px;
    position: absolute;
    right: -7px;
    top: -7px;
    text-align: center;}
.menus ul li .icon.a{ background-position: -40px 0px}
.menus ul li .icon.b{ background-position: -40px -40px}
.menus ul li .icon.c{ background-position: -40px -80px}
.menus ul li .icon.d{ background-position: -40px -120px}
.menus ul li.selected{ border-color: #13bb37;background-color: #3f454d;}
.menus ul li.selected .icon.a{ background-position: 0px 0px}
.menus ul li.selected .icon.b{ background-position: 0px -40px}
.menus ul li.selected .icon.c{ background-position: 0px -80px}
.menus ul li.selected .icon.d{ background-position: 0px -120px}
.menus ul li:hover{ background-color: #3f454d;border-color: #383838;}
.menus ul li.selected:hover{ background-color: #3f454d;border-color: #13bb37;}

/*操作台*/
.controls{height: 100%;  background-color: #3f454d;    width: 285px;    color: #fff;
}
.controls .area{display: -webkit-flex;
    -webkit-flex-flow: row-reverse wrap;
    display: flex;
    flex-flow: column;
    flex-wrap: wrap; height: 100%; width: 100%}
.controls .area .top{height: 30px; border-bottom: 1px solid #54687e}
.controls .area .bottom{flex: 1;width: 100%}

.controls .area .top button{ float: right;margin: 5px;}
/*列表*/
 ul.userList{ margin: 0px; padding: 0px; list-style: none; font-size: 12px;}
 ul.userList li{ display: flex; width: 100%; min-height: 60px; cursor: pointer;position: relative}
 ul.userList li .unreadCount{
    position: absolute;
    background: red;
    border-radius: 50px;
    font-size: 12px;
    width: 18px;
    height: 18px;
    text-align: center;
    line-height: 18px;
    left: 0px;
    top: 6px;
}

ul.userList li .userInfo{white-space: pre-line;
    background: #fff;
    padding: 10px;
    border: 1px solid #13bb36;
    border-radius: 5px;
    position: absolute;left: 38px;
    z-index: 99;
    font-size: 12px;
    color: #484848; display: none;
    top: 10px;}
ul.userList li:hover{ background-color: #494d52;}
ul.userList li .avatarDiv{ width: 60px;  display: flex; justify-content: center; align-items: center;}
ul.userList li .avatarDiv:hover .userInfo{ display: block}
ul.userList li .avatarDiv img{width: 30px; height: 30px;border-radius: 10px;
    border: 3px solid #fff;}
ul.userList li .infoDiv{
    align-items: center;
    display: flex;
    width: 180px;
    flex-flow: column;
    flex-wrap: wrap;
    justify-content: center;
}
ul.userList li .infoDiv div{    word-break: keep-all;white-space:nowrap; width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;}
ul.userList li .otherDiv{align-items: center;
    display: flex;
     flex-flow: column;
    flex-wrap: wrap;color: #858585; }
ul.userList li .infoNsg{color: #858585}
ul.userList li .handle{ position: absolute; right: 0px; bottom: 0px;display: none}
ul.userList li .handle span{ display: inline-block; float: right;width: 20px;height: 20px;cursor: pointer; border-radius: 20px;}
ul.userList li .handle span.del{  background: url("../img/del.png") center center no-repeat}
ul.userList li .handle span.blacklist{  background: url("../img/blist.png") center center no-repeat}
ul.userList li .handle span:hover{ background-color: #f0f0f0}
ul.userList li:hover .handle{ display: block}

.controls .area .bottom  .t{    border-top: 1px solid #54687e;padding: 5px 0px; text-align: center}

/*对话框*/
.talk{height: 100%; flex: 1; background-color: #ffffff; display: -webkit-flex;
    -webkit-flex-flow: row-reverse wrap;
    display: flex;
    flex-flow: column;
    flex-wrap: wrap;}
/*对话框-标题*/
.talk .tit{height: 30px; border-bottom: 1px solid #f0f0f0;
    line-height: 30px;
    font-weight: bold;
    padding: 0 10px;
    color: #484848; }
/*对话框-内容*/
.talk .mess{ flex: 1;    overflow-y: auto;}
.talk .mess ul{margin: 0px;
    padding: 0px;
    list-style: none;
    float: left;
    width: 100%;}
.talk .mess ul li{width: 100%;float: left; text-align: left;margin: 10px 0px;}
.talk .mess ul li.error{    text-align: center;
    color: red;}
.talk .mess ul li.info{    text-align: center; }
.talk .mess ul li.out{ float: right; text-align: right}
.talk .mess ul li .img{float: left;margin: 20px 10px;}
.talk .mess ul li.out .img{float: right;}
.talk .mess ul li .img img{width: 50px;    box-shadow: 1px 1px 6px 0px #cacaca;
    height: 50px;
    border-radius: 25px;}
.talk .mess ul li .info{float: left}
.talk .mess ul li.out .info{float: right}

.talk .mess ul li .info .name{    font-size: 12px;
    padding: 5px 0px;
    color: #707070;}
.talk .mess ul li .info .message {  white-space: pre-line;    max-width: 300px;cursor: pointer;
    word-break: break-all;
     padding: 15px;
    background: #fff8f8;
    color: #484848;
    border-radius: 5px;
    border: 1px solid #e2e2e2;
    box-shadow: 1px 1px 6px 0px #cacaca
}
.talk .mess ul li .info .message .text img{
    width: 20px; height: 20px;
}

.talk .mess ul li .info .time{    font-size: 12px;
    padding: 5px 0px;
    color: #707070;}
.talk .mess ul li.out .info .message {
    background: #69d57f;    border: 1px solid #0a8f25;    color: #000000;
    text-align: left;
}

/*对话框-输入*/
.talk .input{height: 200px;border-top: 1px solid #f0f0f0; position: relative}
.talk .input .tools{ border-bottom:1px solid #f4f4f4; height: 30px;}
.talk .input .tools span{ display: block;width: 40px; height: 30px; float: left;background-image: url("../img/icon.png");background-repeat: no-repeat; cursor: pointer;overflow: hidden;}
.talk .input .tools span input{opacity: 0;cursor: pointer}
.talk .input .tools span.a{background-position: -40px -200px}
.talk .input .tools span.b{background-position: -40px -230px}
.talk .input .tools span.c{background-position: -40px -260px}
.talk .input .tools span.d{background-position: -40px -290px}
.talk .input .tools span.e{background-position: -40px -350px}
.talk .input .tools span.a:hover{background-position: 0px -200px}
.talk .input .tools span.b:hover{background-position: 0px -230px}
.talk .input .tools span.c:hover{background-position: 0px -260px}
.talk .input .tools span.d:hover{background-position: 0px -290px}
.talk .input .tools span.e:hover{background-position: -0px -350px}

.talk .input textarea{width: 95%;
    margin: 2%;
    padding: 0.5%;border: 1px solid #e0e0e0;
    height: 75px; margin-bottom: 10px;
    resize: none;}
.talk .input button{background-image: url("../img/icon.png");background-repeat: no-repeat;background-position: -40px -320px;width: 40px; height: 30px;  border: none;background-color: #fff;
    float: right;
     cursor: pointer; margin-right: 2%}
.talk .input button:hover{background-position: 0px -320px;}


.emojiBox,.bigEmojiBox{
    background: #f5f5f5;
    width: 100%;
    height: 100px;
     border-top: 1px solid #e8e8e8;display: none;
    overflow-y: auto;
    overflow-x: hidden;padding: 10px 0px ;
 }


.mask{position:fixed; left: 0px; top: 0px; width: 100%; height: 100%; right: 0px; bottom: 0px; z-index: 999;background-color: rgba(0,0,0,0.2); display: none;}
.mask .win{ display:flex;width:100%;height:100%;}
.mask .win .box{margin:auto;padding: 20px; background-color: #ffffff; border-radius: 5px; border: 1px solid #d0d0d0;}
.mask .win .box input{ width: 200px; height: 36px;    width: 200px;
    height: 28px;
    border-radius: 3px;
    border: 1px solid #dfdfdf;
    padding: 0px 10px;
    line-height: 28px;}
.mask .win .box button{    height: 30px;
    border: 1px solid #dfdfdf;
    border-radius: 3px;
    cursor: pointer;
    padding: 0px 20px;
    color: #fff;
    background: #057a1e;}
.mask .win .box .buts{text-align: center}

.addUserWin{}
.addUserWin .win .box ul{height: 250px; padding: 0px; margin: 0px; list-style: none; overflow-x: hidden; overflow-y: auto}
.addUserWin .win .box ul li{padding: 10px 10px; cursor: pointer; display: flex;
    align-items: center;}
.addUserWin .win .box ul li .avatarDiv img{width: 50px;
    height: 50px;
    border-radius: 50px;
    border: 3px solid #fff;}
.addUserWin .win .box ul li .infoDiv{    padding: 0px 10px; width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
}
.addUserWin .win .box ul li .infoDiv div{
    text-overflow: ellipsis;
    overflow: hidden;
}
.addUserWin .win .box ul li:hover{    background-color: #e0dfdf;
}


.editMyInfoWin .win .box input[type='text']{width: 300px;}
.editMyInfoWin .win .box input[type='radio']{width: 15px; height: 15px;}
.editMyInfoWin .win .box td{    height: 50px;}


.createGroupWin{ display: flex;justify-content: center;   align-items:center;}
.createGroupWin .win{ display: block;position: relative; padding: 20px; width: auto; height: auto; background-color: #ffffff;border: 1px solid #d0d0d0; border-radius: 10px;}
.createGroupWin .win .box{ padding: 0px;border:none}
.createGroupWin .win .close{ position: absolute; cursor: pointer; right: 5px; top:5px;}
.createGroupWin .win td{ height: 40px;}
.createGroupWin .win input{width:300px;}
.createGroupWin .win input[type='radio']{ width: 15px; height: 15px;}
.createGroupWin .win  button{    height: 30px;    border: 1px solid #dfdfdf;    border-radius: 3px;    cursor: pointer;    padding: 0px 20px;    color: #fff;    background: #057a1e;}
.createGroupWin .win  .buts{text-align: center; margin-top: 20px;}
.createGroupWin .win  ul{height: 430px;    background: #fafafa;
    overflow-x: hidden;border: 1px solid #d8d8d8;width: 286px;
    overflow-y: auto;}
.createGroupWin .win input[type='checkbox']{width: 10px;
    height: 10px;float: right;
    border: 1px solid #000;}
.createGroupWin .win  li .handle{ display: block;    top: 48px;    right: 8px;}
.createGroupWin .win  li{background: #fff;
    border-bottom: 1px solid #f7f1f1;}
.createGroupWin .win  ul li:hover{ background-color: #fff}

.createGroupWin .win  ul li{    justify-content: center;
    align-items: center;
    flex-flow: column;    margin: 3px;
    width: 84px;
    float: left;border-radius: 5px;
}
.createGroupWin .win ul li .avatarDiv{width: 60px; height: 60px;}
.createGroupWin .win ul li .avatarDi img{width: 40px; height: 40px;}
.createGroupWin .win  ul li .infoDiv{width: 100%;    height: 26px;text-align: center;}
.createGroupWin .win  ul li .infoNsg{display: none;}
.createGroupWin .win  ul li .otherDiv{display: none}
.createGroupWin .win  li .handle span.muteUntil{color: red}

.createGroupWin .win  li .handle span{ float: right;    width: 25px;}
.createGroupWin .win  li .handle span:hover{background-color: #fff}

.createGroupWin.updateGroupWinForm{}
.createGroupWin.updateGroupWinForm  ul li .infoDiv{display: block;height: 50px;}
.createGroupWin.updateGroupWinForm  ul li .infoNsg{display: block;}
.createGroupWin.updateGroupWinForm  ul li .otherDiv{display: block;color: red;position: absolute}
.createGroupWin.updateGroupWinForm  ul li.add{height: 110px; line-height: 110px; text-align: center;font-size: 50px; color: #484848; }
.createGroupWin.updateGroupWinForm  ul li .handle{ display: none;  position: absolute; width: 27px;  top: 0px;  right: 0px;}
.createGroupWin.updateGroupWinForm  ul li .handle span{ color: red; border-radius: 3px; border: 1px solid red; margin: 3px; height: 18px; line-height: 18px;}
.createGroupWin.updateGroupWinForm  ul li .handle span:hover{ background-color: red; color: #ffffff}
.createGroupWin.updateGroupWinForm  ul li:hover .handle{display: block;}


.addFriendWin{ display: flex;justify-content: center;   align-items:center;}
.addFriendWin .win{ display: block;position: relative; padding: 20px; width: auto; height: auto; background-color: #ffffff;border: 1px solid #d0d0d0; border-radius: 10px;}
.addFriendWin .win .box{ padding: 0px;border:none}
.addFriendWin .win .close{ position: absolute; cursor: pointer; right: 5px; top:5px;}
.addFriendWin .win .buts{display: none}
.addFriendWin .win  button{    height: 30px;    border: 1px solid #dfdfdf;    border-radius: 3px;    cursor: pointer;    padding: 0px 20px;    color: #fff;    background: #057a1e;}
.addFriendWin .win ul{height: 600px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #eeeeee;
    background: #fbfbfb;
    margin-top: 10px;}

.addFriendRemarkWin{ display: flex;justify-content: center;   align-items:center;}
.addFriendRemarkWin .win{ display: block;position: relative; padding: 20px; width: auto; height: auto; background-color: #ffffff;border: 1px solid #d0d0d0; border-radius: 10px;}
.addFriendRemarkWin .win .box{ padding: 0px;border:none}
.addFriendRemarkWin .win .close{ position: absolute; cursor: pointer; right: 5px; top:5px;}
.addFriendRemarkWin .win .buts{display: none}

.friendInfoWin{ display: flex;justify-content: center;   align-items:center;}
.friendInfoWin .win{ display: block;position: relative; padding: 20px; width: auto; height: auto; background-color: #ffffff;border: 1px solid #d0d0d0; border-radius: 10px;}
.friendInfoWin .win .box{ padding: 0px;border:none}
.friendInfoWin .win .close{ position: absolute; cursor: pointer; right: 5px; top:5px;}
.friendInfoWin .win .buts{display: none}
.friendInfoWin .win th{ width: 80px; color: #383838}
.friendInfoWin .win td{ width: 200px;white-space: pre-line;color: #383838}
.friendInfoWin .win td.grey{ color: #808080}


.lookImageWin{ display: flex;justify-content: center;   align-items:center;}
.lookImageWin .win{ display: block;position: relative; padding: 20px; width: auto; height: auto; background-color: #ffffff;border: 1px solid #d0d0d0; border-radius: 10px;}
.lookImageWin .win .box{ padding: 0px;border:none}
.lookImageWin .win .close{ position: absolute; cursor: pointer; right: 5px; top:5px;}
.lookImageWin .win .buts{display: none}


.editMyWin{ display: flex;justify-content: center;   align-items:center;}
.editMyWin .win{ display: block;position: relative; padding: 20px; width: auto; height: auto; background-color: #ffffff;border: 1px solid #d0d0d0; border-radius: 10px;}
.editMyWin .win .box{ padding: 0px;border:none}
.editMyWin .win .close{ position: absolute; cursor: pointer; right: 5px; top:5px;}
.editMyWin .win  button{    height: 30px;    border: 1px solid #dfdfdf;    border-radius: 3px;    cursor: pointer;    padding: 0px 20px;    color: #fff;    background: #057a1e;}
.editMyWin .win  .buts{text-align: center; margin-top: 20px;}
.editMyWin .win input[type='radio']{ width: 15px; height: 15px;}

.loginWin{ display: flex;justify-content: center;   align-items:center;}
.loginWin .win{ display: block;position: relative; padding: 20px; width: auto; height: auto; background-color: #ffffff;border: 1px solid #d0d0d0; border-radius: 10px;}
.loginWin .win .box{ padding: 0px;border:none}


.messWin{
    position: absolute;
    z-index: 999;
    background: #ffffff;
    list-style: none;
    box-shadow: 1px 1px 4px 1px #b5b5b5;
    padding: 10px;
    margin-top: -30px;
    margin-left: -30px;
    border-radius: 5px;
    display: block;

}
.messWin li{
    cursor: pointer;
    font-size: 12px;
    padding: 5px 5px;
}
.messWin li:hover{ color: #545454}
